<template>
    <div class="container">

        <div class="body_wrap">
            <el-card class="body_card" shadow="hover" ref="content_card">
                <div class="header_back_wrap">
                    <el-page-header @back="$router.back(-1)" :content="$route.meta.title" class="headerBack"></el-page-header>
                    <el-divider></el-divider>
                </div>

                <div class="form_content">
                    <div class="table_form_wrap">
                        <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                            <el-form-item label="order_id" prop="orderId">
                                <el-input placeholder="" v-model="form.orderId" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="spu_id" prop="spuId">
                                <el-input placeholder="" v-model="form.spuId" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品spu名称" prop="spuName">
                                <el-input placeholder="" v-model="form.spuName" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品spu主图" prop="spuPic">
                                <el-input placeholder="" v-model="form.spuPic" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品品牌" prop="spuBrand">
                                <el-input placeholder="" v-model="form.spuBrand" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类id" prop="categoryId">
                                <el-input placeholder="" v-model="form.categoryId" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类名称" prop="categoryName">
                                <el-input placeholder="" v-model="form.categoryName" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品sku条形码" prop="skuId">
                                <el-input placeholder="" v-model="form.skuId" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品sku名字" prop="skuName">
                                <el-input placeholder="" v-model="form.skuName" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品sku图片" prop="skuPic">
                                <el-input placeholder="" v-model="form.skuPic" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品sku价格" prop="skuPrice">
                                <el-input placeholder="" v-model="form.skuPrice" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品购买的数量" prop="skuNum">
                                <el-input placeholder="" v-model="form.skuNum" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品销售属性组合（JSON）" prop="skuAttrsVals">
                                <el-input placeholder="" v-model="form.skuAttrsVals" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="商品促销分解金额" prop="promotionAmount">
                                <el-input placeholder="" v-model="form.promotionAmount" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="优惠券优惠分解金额" prop="couponAmount">
                                <el-input placeholder="" v-model="form.couponAmount" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="积分优惠分解金额" prop="integrationAmount">
                                <el-input placeholder="" v-model="form.integrationAmount" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="该商品经过优惠后的分解金额" prop="realAmount">
                                <el-input placeholder="" v-model="form.realAmount" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="赠送积分" prop="giftIntegration">
                                <el-input placeholder="" v-model="form.giftIntegration" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="赠送成长值" prop="giftGrowth">
                                <el-input placeholder="" v-model="form.giftGrowth" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间" prop="ctime">
                                <el-input placeholder="" v-model="form.ctime" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <el-form-item label="更新时间" prop="utime">
                                <el-input placeholder="" v-model="form.utime" clearable style="width: 30%"></el-input>
                            </el-form-item>
                            <!--
                            <el-form-item label="状态" prop="status">
                                <el-radio-group v-model="form.status">
                                    <el-radio-button :label="1">正常</el-radio-button>
                                    <el-radio-button :label="0">锁定</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-select v-model="form.sex" placeholder="请选择">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生日" prop="birthday">
                                <el-date-picker
                                    v-model="form.birthday"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"
                                    style="width: 63%;">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="备注" prop="remarks">
                                <el-input v-model="form.remarks" type="textarea" :rows="4" placeholder="请输入内容" style="width: 80%;"></el-input>
                            </el-form-item>
                            -->

                        </el-form>
                    </div>
                </div>

                <div class="foot_submit">
                    <el-button @click="$router.back(-1)">返 回</el-button>
                    <el-button @click="handleSubmit" type="primary" :loading="submitLoading">提 交</el-button>
                </div>

            </el-card>
        </div>



    </div>
</template>

<script>
    export default {
        data() {
            return {
                submitLoading: false,
                form: {
                    orderId: null,
                    spuId: null,
                    spuName: null,
                    spuPic: null,
                    spuBrand: null,
                    categoryId: null,
                    categoryName: null,
                    skuId: null,
                    skuName: null,
                    skuPic: null,
                    skuPrice: null,
                    skuNum: null,
                    skuAttrsVals: null,
                    promotionAmount: null,
                    couponAmount: null,
                    integrationAmount: null,
                    realAmount: null,
                    giftIntegration: null,
                    giftGrowth: null,
                    ctime: null,
                    utime: null
                },
                rules: {
                    orderId: [
                        { required: true, message: 'order_id不能为空', trigger: 'blur' }
                    ],
                    spuId: [
                        { required: true, message: 'spu_id不能为空', trigger: 'blur' }
                    ],
                    spuName: [
                        { required: true, message: '商品spu名称不能为空', trigger: 'blur' }
                    ],
                    spuPic: [
                        { required: true, message: '商品spu主图不能为空', trigger: 'blur' }
                    ],
                    spuBrand: [
                        { required: true, message: '商品品牌不能为空', trigger: 'blur' }
                    ],
                    categoryId: [
                        { required: true, message: '商品分类id不能为空', trigger: 'blur' }
                    ],
                    categoryName: [
                        { required: true, message: '商品分类名称不能为空', trigger: 'blur' }
                    ],
                    skuId: [
                        { required: true, message: '商品sku条形码不能为空', trigger: 'blur' }
                    ],
                    skuName: [
                        { required: true, message: '商品sku名字不能为空', trigger: 'blur' }
                    ],
                    skuPic: [
                        { required: true, message: '商品sku图片不能为空', trigger: 'blur' }
                    ],
                    skuPrice: [
                        { required: true, message: '商品sku价格不能为空', trigger: 'blur' }
                    ],
                    skuNum: [
                        { required: true, message: '商品购买的数量不能为空', trigger: 'blur' }
                    ],
                    skuAttrsVals: [
                        { required: true, message: '商品销售属性组合（JSON）不能为空', trigger: 'blur' }
                    ],
                    promotionAmount: [
                        { required: true, message: '商品促销分解金额不能为空', trigger: 'blur' }
                    ],
                    couponAmount: [
                        { required: true, message: '优惠券优惠分解金额不能为空', trigger: 'blur' }
                    ],
                    integrationAmount: [
                        { required: true, message: '积分优惠分解金额不能为空', trigger: 'blur' }
                    ],
                    realAmount: [
                        { required: true, message: '该商品经过优惠后的分解金额不能为空', trigger: 'blur' }
                    ],
                    giftIntegration: [
                        { required: true, message: '赠送积分不能为空', trigger: 'blur' }
                    ],
                    giftGrowth: [
                        { required: true, message: '赠送成长值不能为空', trigger: 'blur' }
                    ],
                    ctime: [
                        { required: true, message: '创建时间不能为空', trigger: 'blur' }
                    ],
                    utime: [
                        { required: true, message: '更新时间不能为空', trigger: 'blur' }
                    ],
                }
            }
        },

        created() {
            this.form.id = this.$route.query.id
        },

        mounted() {
            this.$nextTick(() => {
                if(this.form.id) {
                    this.getInfo(this.form.id)
                }
            })
        },

        methods: {

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/mall/omsordergoods/info/' + id,
                        method: 'GET'
                    })
                    this.form = Object.assign({}, res.data)
                }
            },


            /**
             * 提交表单
             */
            async handleSubmit() {
                const refs = this.$refs
                this.submitLoading = true
                const valid = await refs['form'].validate().catch(() => {})
                if(valid) {
                    const res = await this.$http({
                        url: `/mall/omsordergoods/${!this.form.id ? 'save' : 'update'}`,
                        method: 'POST',
                        data: this.form
                    })
                    if (this.ResultMessage(res)) {
                        this.$router.back(-1)
                        refs['form'].resetFields()

                        this.submitLoading = false
                    } else {
                        this.submitLoading = false
                    }
                } else {
                    this.submitLoading = false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>



</style>
